<!--
 * @Author: your name
 * @Date: 2020-12-28 17:53:01
 * @LastEditTime: 2020-12-29 14:27:17
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \basicvue\vuehtml\vueindex.html
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/common.css">
    <link rel="stylesheet" href="../assets/css/vue.css">
    <script src="../assets/js/vue.js"></script>
</head>
<body>
<div id="app">
    <a href="../index.html" class="retu">BACK</a>
    <h1>computed计算属性</h1>
    <span>computed的作用主要是对原数据进行改造输出，改造输出包括编辑，大小，顺序重拍,添加符号</span>
    <hr>
    <p>
        <span>{{newPrice}}</span>
    </p>
    <ul>
        <li v-for="news in reverseNews">{{ news.title }} -- {{ news.date }}</li>
    </ul>
</div>
<script type="text/javascript">

    //计算属性的作用就是不改变原来的数据，对原来的数据进行加工然后进行输出
    var newsList = [
        {title : '香港火酒扣”事件追责 起诉涉事运输公',date:'2020-20-21'},
        {title : '日本第二大准航母服役 外媒：针对中国潜艇',date:'2020-20-20'},
        {title : '起底“最短命副市长”：不到40天落马，全家被查',date:'2020-20-23'}
    ];

    var app = new Vue({
        el : '#app',
        data : {
            price : 100,
            newsList : newsList
        },
        computed:{
            newPrice:function(){
                return this.price = '￥' + this.price + '元';
            },
            reverseNews:function () {
                return this.newsList.reverse();
            }
        }
    });
</script>
</body>
</html>